<template>
  <view class="agreement-page">
    <!-- 导航栏样式 -->
    <view class="navbar">
      <view class="title">{{ pageTitle }}</view>
    </view>

    <!-- 协议内容 -->
    <scroll-view class="content" scroll-y>
      <view class="agreement-content">
        <view class="main-title">{{ agreement }}</view>
        <view class="update-date">生效日期 2023年10月1日</view>

        <!-- 服务协议内容 -->
        <template v-if="type === 'service'">
          <view class="section">
            <view class="section-title">一、服务条款</view>
            <view class="section-content">
              <view class="paragraph">1.1 本服务由我们提供，您在使用前请同意本协议所有条款。</view>
              <view class="paragraph">1.2 我们有权根据业务需要更新服务内容，更新后除过重大变更外不会再单独通知您。</view>
            </view>
          </view>

          <view class="section">
            <view class="section-title">二、用户义务</view>
            <view class="section-content">
              <view class="paragraph">2.1 您应提供真实、准确的信息，如信息变更及时更新。</view>
              <view class="paragraph">2.2 您不得利用本服务从事任何违法违规活动，否则我们有权终止服务。</view>
            </view>
          </view>
        </template>

        <!-- 隐私政策内容 -->
        <template v-else-if="type === 'privacy'">
          <view class="section">
            <view class="section-title">一、信息收集</view>
            <view class="section-content">
              <view class="paragraph">1.1 为提供服务，我们会收集您的微信昵称、头像及手机号（用于账号绑定）。</view>
              <view class="paragraph">1.2 我们不会收集与服务无关的信息，也不会向第三方泄露您的信息。</view>
            </view>
          </view>

          <view class="section">
            <view class="section-title">二、信息使用</view>
            <view class="section-content">
              <view class="paragraph">2.1 收集的信息仅用于为您提供服务，如身份验证、业务通知等。</view>
              <view class="paragraph">2.2 您可随时联系我们咨询或删除您的个人信息。</view>
            </view>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 协议类型（service-服务协议、privacy-隐私政策）
const type = ref('service')
const pageTitle = ref('用户服务协议')
const agreement = ref('用户服务协议')

// 页面加载时对内容初始化
const onLoad = (options) => {
  if (options.type === 'privacy') {
    type.value = 'privacy'
    pageTitle.value = '隐私政策'
    agreement.value = '隐私政策'
  }
}

// 注册生命周期
definePageMeta({
  onLoad
})
</script>

<style lang="scss" scoped>
.agreement-page {
  height: 100vh;
  background-color: #fff;
}

/* 导航栏样式 */
.navbar {
  height: 108rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
  position: relative;

  .title {
    font-size: 34rpx;
    font-weight: 500;
    color: #333;
  }
}

/* 内容样式 */
.content {
  height: calc(100vh - 108rpx);
  width: 100%;

  .agreement-content {
    padding: 40rpx 36rpx;

    .main-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .update-date {
      font-size: 22rpx;
      color: #999;
      text-align: center;
      margin-bottom: 40rpx;
      padding-bottom: 20rpx;
      border-bottom: 1px solid #eee;
    }

    // 章节样式
    .section {
      margin-bottom: 40rpx;

      .section-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin: 0 0 15rpx 0;
      }

      .section-content {
        font-size: 26rpx;
        color: #666;
        line-height: 1.6;

        .paragraph {
          margin-bottom: 20rpx;
          text-indent: 2em;
        }
      }
    }
  }
}
</style>